<template>
  <div class="users">
    <NavBar></NavBar>
    <UserHeader @updateComName="updateComName"></UserHeader>
    <component :is="comName" />
  </div>
</template>

<script>
import UserHeader from "@/components/User/UserHeader";
import UserFans from "@/components/User/UserFans";
import UserFollowings from "@/components/User/UserFollowings";
import UserCollections from "@/components/User/UserCollections";
import NavBar from "@/components/Home/NavBar";

import { mapActions, mapState } from "vuex";

export default {
  components: {
    NavBar,
    UserHeader,
    UserFans,
    UserFollowings,
    UserCollections,
  },
  data() {
    return {
      comName: "UserFans",
    };
  },
  computed: {
    ...mapState("user", ["tokenInfo", "watchingUser"]),
  },
  methods: {
    ...mapActions("user", ["initWatchingUser"]),
    updateComName(val) {
      this.comName = val;
    },
  },
  created() {
    this.initWatchingUser(this.$route.params.id);
  },

  beforeRouteUpdate(to, from, next) {
    if (to.fullPath != from.fullPath) {
      next();
      this.initWatchingUser(to.params.id);
    }
  },
};
</script>

<style lang="less" scoped>
.users {
  background-color: #fbfbfb;
}
</style>
